<template>
	<view class="content">
		<view class="bgColor">
			<image src="/static/examine/msgBg.png" mode=""></image>
		</view>
		<cusHeaderVue titleContent="OA审批" :showBack="false"></cusHeaderVue>
		<scroll-view scroll-y="true"
			:style="{paddingTop: `calc(${scrollerHeight} + 90rpx)`,height: `calc(100vh - ${scrollerHeight} - 90rpx`}">
			<view class="contBox">
				<view class="contTop">
					<view class="contLi" @click="toUrl('/pages/examine/examineCentre?type=todo')">
						<image src="/static/examine/dcl.png" mode=""></image>
						<view class="contName">
							待处理
						</view>
						<!-- 角标隐藏：待处理不显示数量 -->
						<view v-if="oaNumber.todo > 0" class="badge">
							{{ oaNumber.todo > 99 ? '99+' : oaNumber.todo }}
						</view>

					</view>
					<view class="contLi" @click="toUrl('/pages/examine/examineCentre?type=done')">
						<image src="/static/examine/ycl.png" mode=""></image>
						<view class="contName">
							已处理
						</view>
						<!-- <view v-if="oaNumber.done > 0" class="badge">
							{{ oaNumber.done > 99 ? '99+' : oaNumber.done }}
						</view> -->
					</view>
					<view class="contLi" @click="toUrl('/pages/examine/examineCentre?type=my')">
						<image src="/static/examine/wfqd.png" mode=""></image>
						<view class="contName">
							我发起的
						</view>
						<!-- <view v-if="oaNumber.my > 0" class="badge">
							{{ oaNumber.my > 99 ? '99+' : oaNumber.my }}
						</view> -->
					</view>
					<view class="contLi" @click="toUrl('/pages/examine/examineCentre?type=copy')">
						<image src="/static/examine/cswd.png" mode=""></image>
						<view class="contName">
							抄送我的
						</view>
						<view v-if="oaNumber.copy > 0" class="badge">
							{{ oaNumber.copy > 99 ? '99+' : oaNumber.copy }}
						</view>
					</view>
				</view>
				<view class="contBottom">
					<view class="contBottomTit">
						场景
					</view>
					<view class="contBottomBox" v-if="processDefinitionList.length > 0">
						<view class="contBottomLi" 
							v-for="item in processDefinitionList" 
							:key="item.id"
							@click="navigateToForm(item)">
							<image :src="getIconUrl(item.icon)" mode=""></image>
							<view class="contBottomName">
								{{ item.name || '未命名流程' }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	import cusHeaderVue from '@/components/cus-header.vue';
	import { GETProcessDefinitionList, GETUserOANumber } from '@/api/interface.js';
const scrollerHeight = ref('');
const processDefinitionList = ref([]);
const oaNumber = ref({
	todo: 0, // 待处理数量
	done: 0, // 已处理数量
	my: 0, // 我发起的数量
	copy: 0 // 抄送我的数量
});



	//获取状态栏高度
	const getBarHeight = () => {
		uni.getSystemInfo({
			success: function(res) {
				scrollerHeight.value = res.statusBarHeight + 'px'
			}
		});
	}

	const toUrl = (urlSrc) => {
		uni.navigateTo({
			url: urlSrc
		})
	}

	// 根据流程类型跳转到对应的表单页面，确保正确存储ID并传递
	const navigateToForm = (item) => {
		// 确保存储ID并在URL中传递
		let url = '/pages/examine/requisitionForm';
		
		// 传递流程ID作为id参数和名称作为title参数
		const title = item.name || '未命名流程';
		uni.navigateTo({
			url: url + '?id=' + item.id + '&title=' + encodeURIComponent(title)
		});
	}

	// 获取完整的图标URL
	const getIconUrl = (icon) => {
		// 如果icon为空，返回默认图片
		if (!icon) {
			return '/static/examine/wuliaoshenqing.png';
		}
		// 检查icon是否已经是完整的URL
		if (icon.startsWith('http://') || icon.startsWith('https://')) {
			return icon;
		}
		// 如果icon包含aliyuncs或oss等关键词，尝试拼接完整URL
		if (icon.includes('aliyuncs') || icon.includes('oss')) {
			return 'https://' + icon;
		}
		// 其他情况返回默认图片
		return '/static/examine/wuliaoshenqing.png';
	}

	// 获取流程定义列表
const loadProcessDefinitionList = async () => {
	try {
		const res = await GETProcessDefinitionList();
		if (res.code === 0 && res.data) {
			processDefinitionList.value = res.data || [];
			console.log('流程定义列表:', processDefinitionList.value);
		}
	} catch (error) {
		console.error('获取流程定义列表失败:', error);
	}
}

// 获取OA数量统计
const loadOANumber = async () => {
	try {
		const res = await GETUserOANumber();
		if (res.code === 0 && res.data) {
			// 根据实际返回的数据结构进行字段映射
			const data = res.data || {};
			// 确保各字段有默认值为0
			oaNumber.value.todo = Number(data.daiban || 0); // 待处理
			oaNumber.value.done = Number(data.yiban || 0);  // 已处理
			oaNumber.value.my = Number(data.wofaqi || 0);   // 我发起的
			oaNumber.value.copy = Number(data.chaosong || 0); // 抄送我的
			console.log('OA数量统计:', oaNumber.value);
		}
	} catch (error) {
		console.error('获取OA数量统计失败:', error);
	}
}

	onLoad((options) => {
		getBarHeight();
		// 检查是否带有tab参数，如果有则自动跳转到对应页面
		if (options && options.tab) {
			const tabType = options.tab;
			let targetUrl = '';
			// 根据参数值确定目标tab页面
			switch (tabType) {
				case 'todo':
				case 'done':
				case 'my':
				case 'copy':
					targetUrl = `/pages/examine/examineCentre?type=${tabType}&searchType=${tabType}`;
					break;
				// 如果需要，可添加其他映射关系
				default:
					// 参数无效时不进行跳转
					return;
			}
			// 使用setTimeout确保页面初始化完成后再跳转
			setTimeout(() => {
				toUrl(targetUrl);
			}, 100);
		}
	})

	onShow(() => {
	loadProcessDefinitionList();
	loadOANumber();
})
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
	}

	.bgColor {
		width: 100%;
		height: 740rpx;
		position: absolute;
		z-index: -1;
		top: 0;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.contBox {
		padding: 22rpx;
		box-sizing: border-box;
		padding-bottom: calc(env(safe-area-inset-bottom) + 101rpx);

		.contTop {
			width: 100%;
			border-radius: 12.82rpx;
			background: #ffffff;
			box-shadow: 2.56rpx 4.49rpx 10.9rpx 0.64rpx #c0c0c03b;
			padding: 33rpx 25rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-around;
			.contLi{
								text-align: center;
								position: relative;
								image{
									width: 39.74rpx;
									height: 40.38rpx;
								}
								.contName{
									font-size: 24.36rpx;
									font-weight: 400;
									color: #1C2027;
								}
								.badge{
									position: absolute;
									top: 0;
									right: -10rpx;
									min-width: 32rpx;
									height: 32rpx;
									padding: 0 10rpx;
									background-color: #FF4D4F;
									color: #FFFFFF;
									font-size: 20rpx;
									font-weight: 500;
									border-radius: 16rpx;
									display: flex;
									align-items: center;
									justify-content: center;
									z-index: 1;
								}
						}
		}
		.contBottom{
			padding: 31rpx 34rpx;
			box-sizing: border-box;
			margin-top: 18rpx;
			border-radius: 12.82rpx 12.82rpx 12.82rpx 12.82rpx;
			background: #ffffff;
			box-shadow: 0 0 13.46rpx 0 #095a8b30;
			.contBottomTit{
				font-weight: 500;
				font-size: 33.33rpx;
				color: #1C2027;
			}
			.contBottomBox{
				display: flex;
				align-items: center;
				margin-top: 32rpx;
				.contBottomLi{
					text-align: center;
					margin-right: 69rpx;
					image{
						width: 89.74rpx;
						height: 89.74rpx;
					}
					.contBottomName{
						font-size: 24.36rpx;
						font-weight: 400;
						color: #1C2027;
					}
				}
			}
		}

		


	}
</style>